<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class v-cloak v-if="module">
        <background-editor :module="module"></background-editor>
        <width-editor :module="module"></width-editor>
        <radius-editor :module="module"></radius-editor>
        <margin-editor :module="module"></margin-editor>
        <padding-editor :module="module"></padding-editor>
        <height-editor v-if="module.height" :module="module"></height-editor>
        <shadow-editor :module="module"></shadow-editor>
        <!-- <position-editor :module="module"></position-editor> -->
    </div>
</template>

<style scoped></style>

<script>
import BackgroundEditor from "./BackgroundEditor";
import RadiusEditor from "./RadiusEditor";
import HeightEditor from "./HeightEditor";
import WidthEditor from "./WidthEditor";
import MarginEditor from "./MarginEditor";
import PaddingEditor from './PaddingEditor'
import ShadowEditor from "./ShadowEditor";
import StickyEditor from './StickyEditor';
import PositionEditor from './PositionEditor';

export default {
    components: {
        WidthEditor,
        HeightEditor,
        RadiusEditor,
        MarginEditor,
        ShadowEditor,
        PaddingEditor,
        BackgroundEditor,
        StickyEditor,
        PositionEditor,
    },
    data () {
        return {
            predefineColors: [
                "rgba(255,255,255,1)",
                "rgba(255,255,255,0.5)",
                "rgba(0,0,0,0.5)",
            ],
            loading: false,
        };
    },
    props: {
        module: { type: Object },
        disabledAttrs: { type: Array, default: () => [] }, //  设置哪些熟悉禁止编辑？
    },

    watch: {},

    mounted: function () {
        // 确保字段存在
    },

    computed: {
        heightDisabled: function () {
            return this.disabledAttrs.includes("height");
        },
        paddingDisabled: function () {
            return this.disabledAttrs.includes("padding");
        },
        backgroundDisabled: function () {
            return this.disabledAttrs.includes("background");
        },

        isReady: function () {
            return this.module && this.module.header && this.module.body;
        },
        minWidth: function () {
            return 300;
        },
        maxWidth: function () {
            return 375;
        },
    },

    methods: {
        bodyBgChange: function (val) {
            this.module.body.background.color = val;
        },

        updateWidth: function (val) {
            this.$set(this.module, "width", val);
        },
    },
};
</script>

<style scoped>
.sub-form-item {
    padding-left: 100px;
}
</style>
